<template>
  <div id="freeZone">
    <header>
      <i @click="goBack()"></i>
      <div>学习专区</div>
    </header>
    <nav>
      <div class="active" @click='tabToggle(0,sentPage,"click")'>
            免费专区
      </div>
      <div @click='tabToggle(1,sentPage,"click")'>
            收费专区
      </div>
    </nav>
    <ul class="freeList">
      <div class='mc' v-if="list.length<1">
        <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
        <p>暂无数据!</p>
      </div>
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :bottom-pull-text="bottomPullText"
        :autoFill="false">
        <li v-for="(item,index) in list" :key='index' v-if="list.length>0">
          <router-link :to='{name:"homeDetail",query:{id: item.id}}'>
            <img :src="item.course_pic" width="112" height="77" />
            <div>
              <h3>{{item.course_name}}</h3>
              <div v-if='item.username'>
                主讲老师: {{item.username}}
              </div>
              <!-- <div v-if='item.starttime'>
                              开课时间: {{item.starttime}}
                            </div> -->
              <div>
                {{item.program}}
              </div>
              <p>
                <i>￥{{item.charge}}</i>
                <!-- <b>2306人想学</b> -->
              </p>
            </div>
          </router-link>
        </li>
      </mt-loadmore>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [],
        sentPage: {
          page: 1, //分页累加
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        bottomPullText: "上拉加载数据哦~", //上拉提示信息
      }
    },
    methods: {
      goBack() {
        this.$router.back();
      },
      //判断入口 是免费的还是收费的 获取对应状态的订单列表
      tabToggle(i, params, click) { //0已完成 1未完成
        $('nav div').eq(i).addClass('active').siblings().removeClass();
        //每点击一次初始化
        if (click) {
          this.list = [];
          this.sentPage.page = 1;
        }
        // 免费
        if (i == 0) {
          this.getFreeData(this.sentPage);
        }
        // 收费
        if (i == 1) {
          // this.type = '收费';
          this.list = [];
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_course_user/0?iffree=charge", params, r => {
            this.totalNum = r.data.records;
            if (this.sentPage.page == 1) {
              this.list = r.data.rows;
            } else {
              this.list = this.list.concat(r.data.rows);
            }
            if (r.data.rows.length == 0 && this.sentPage.page > 1) {
              this.$utils._toast("暂无更多数据");
            }
          }, err => {
            console.log(err);
          })
        }
      },




      //获取课程列表 v-if判断是否是热门视频
      getFreeData(params) {
        // 第一个参数是root--baseurl
        var that = this;
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_course_user/0?iffree=free", params, r => {
          console.log(r);
          this.totalNum = r.data.records; //总数据
          if (this.sentPage.page == 1) {
            that.list = r.data.rows;
          } else {
            that.list = that.list.concat(r.data.rows);
          }
          if (r.data.rows.length == 0) {
            that.$utils._toast("暂无更多数据");
          }
        }, err => {
          console.log(err);
        })
      },
      //下拉刷新
      loadTop() {
        this.sentPage.page = 1;
        setTimeout(() => {
          this.getFreeData(this.sentPage);
          this.allLoaded = false;
        }, 20);
        this.$refs.loadmore.onTopLoaded();
      },
      //上拉加载
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getFreeData(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      }
    },
    created() {
      this.getFreeData(this.sentPage);
    },

  }

</script>
<style lang="scss" scoped>
  nav {
    background: greenyellow;
    display: flex;
    /* justify-content: space-around; */
    height: 0.4rem;
    line-height: 0.4rem;
    
    div{
    width:50%;
    text-align: center
        
    }
    .active{
        background: red;
        color:#fff;
    }
  }

  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding-top: 10px;
      text-align: center;
    }
  }

</style>
